import { Button, Space, Popconfirm, Image, InputNumber, Input, Form, Modal } from "antd";
// import CommonInput from "@/pages/OrderModule/common/components/CommonInput";
// import CommonInputNumber from "@/pages/OrderModule/common/components/CommonInputNumber";
// import { CommonModal } from "@/views/components/CommonModal";
// import ImageUpload from "../../../ImageUpload";
import CommonImgsLoad from "@/components/CommonImgsLoad";
import Style from "./index.module.less";
import { useEffect } from "react";
export function useGoodsColumns({ form, setDialogName, isEdit }) {
	const handleEditSku = (val, index, key) => {
		const arr = form.getFieldValue("goodsSku");
		arr[index][key] = val;
		form.setFieldsValue({
			goodsSku: arr
		});
	};
	// 图片上传失败
	const handleError = (err, failed) => {
		// console.log("file upload error", err, failed);
		if (!err.isLt2M) {
			setDialogName("ImageErrorModal");
			// Modal.error({ content: "图片仅限1m以内，上传失败", centered: true });
		}
	};

	const FormImage = ({ value, onChange, key, ...arg }) => {
		console.log();
		useEffect(() => {
			console.log("imgValue", value);
		}, [value]);
		return <CommonImgsLoad key={key + value} img={value} handleOk={onChange} {...arg} />;
	};

	const goodsColumns = [
		{
			title: "图片",
			dataIndex: "image",
			width: 60,
			render: (value, record, index) => {
				return (
					<Form.Item key={index} name={[index, "image"]}>
						<CommonImgsLoad
							key={record.key + value}
							disabled={record.isDelete}
							size={1}
							img={value}
							handleOk={val => handleEditSku(val, index, "image")}
							handleError={handleError}
							zIndex={1001}
							antPreview={true}
							className={`customImg ${Style.skuImg}`}
						/>
					</Form.Item>
				);
			}
		},
		{
			title: "商品编码",
			dataIndex: "skuCode",
			width: 160,
			render(value, record, index) {
				return (
					<Form.Item key={index} name={[index, "skuCode"]} rules={[{ required: true, message: "请输入商品编码" }]}>
						{isEdit && record.id ? (
							<>{value}</>
						) : (
							<Input placeholder="请输入商品编码" defaultValue={value} disabled={record.isDelete} />
						)}
					</Form.Item>
				);
			}
		},
		{
			title: "颜色",
			dataIndex: "colour",
			width: 160,
			render(value, record, index) {
				return (
					<Form.Item key={index} name={[index, "colour"]} rules={[{ required: true, message: "请输入颜色" }]}>
						<Input placeholder="请输入颜色" defaultValue={value} disabled={record.isDelete} />
					</Form.Item>
				);
			}
		},
		{
			title: "尺码",
			dataIndex: "specs",
			width: 160,
			render(value, record, index) {
				console.log("record", record);
				return (
					<Form.Item key={index} name={[index, "specs"]} rules={[{ required: true, message: "请输入尺码" }]}>
						<Input placeholder="请输入尺码" defaultValue={value} disabled={record.isDelete} />
					</Form.Item>
				);
			}
		},
		{
			title: "零售价（元）",
			dataIndex: "retailPrice",
			width: 160,
			render: (value, record, index) => (
				<Form.Item key={index} name={[index, "retailPrice"]}>
					<InputNumber
						disabled={record.isDelete}
						placeholder="请输入零售价"
						defaultValue={value}
						min={0}
						max={100000000}
						precision={2}
						controls={false}
					/>
				</Form.Item>
			)
		},
		{
			title: "成本价（元）",
			dataIndex: "costPrice",
			width: 160,
			render(value, record, index) {
				return (
					<Form.Item key={index} name={[index, "costPrice"]} rules={[{ required: true, message: "请输入成本价" }]}>
						<InputNumber
							disabled={record.isDelete}
							placeholder="请输入成本价"
							defaultValue={value}
							min={0}
							precision={2}
							max={100000000}
							controls={false}
						/>
					</Form.Item>
				);
			}
		},
		{
			title: "市场价I吊牌价（元）",
			width: 160,
			dataIndex: "tagPrice",
			render(value, record, index) {
				return (
					<Form.Item key={index} name={[index, "tagPrice"]}>
						<InputNumber
							placeholder="请输入市场价I吊牌价"
							defaultValue={value}
							disabled={record.isDelete}
							min={0}
							precision={2}
							max={100000000}
							controls={false}
						/>
					</Form.Item>
				);
			}
		},
		{
			title: "重量（kg）",
			dataIndex: "weight",
			width: 160,
			render(value, record, index) {
				return (
					<Form.Item key={index} name={[index, "weight"]}>
						<InputNumber
							placeholder="请输入重量"
							defaultValue={value}
							disabled={record.isDelete}
							controls={false}
							min={0}
							precision={2}
							max={100000000}
						/>
					</Form.Item>
				);
			}
		},
		{
			title: "商品成分",
			dataIndex: "productIngredients",
			width: 160,
			render(value, record, index) {
				return (
					<Form.Item key={index} name={[index, "productIngredients"]}>
						<Input placeholder="请输入商品成分" defaultValue={value} disabled={record.isDelete} />
					</Form.Item>
				);
			}
		},
		{
			title: "自定义属性",
			dataIndex: "customAttribute",
			width: 160,
			render(value, record, index) {
				return (
					<Form.Item key={index} name={[index, "customAttribute"]}>
						<Input placeholder="请输入自定义属性" defaultValue={value} disabled={record.isDelete} />
					</Form.Item>
				);
			}
		}
		// {
		// 	title: "操作",
		// 	dataIndex: "opera",
		// 	width: 80,
		// 	render(_, record, index) {
		// 		return (
		// 			<>
		// 				<Space>
		// 					<Popconfirm title="确定删除吗？" okText="确定" cancelText="取消" onConfirm={() => handleDelete(record, index)}>
		// 						<Button type="link">删除</Button>
		// 					</Popconfirm>
		// 				</Space>
		// 			</>
		// 		);
		// 	}
		// }
	].map(e => {
		return {
			...e,
			key: e.dataIndex
		};
	});

	return {
		goodsColumns
	};
}
